Day 17 Cart & Slide 我弄了一個 Slide 挑選商品的介面。 選好之後，我想要開一個跳窗去計算我的商品價格。 主要想要玩玩看 ion-modal (互動視窗)元件。

建立一個 cart 頁面，這個頁面是要在 ion-modal 所以建立之後移除了 module 跟 route，還有預設在 app-routing.module.ts 中的 route 。

ionic generate page cart

並且加入在 shopping.module.ts

在 shopping.page.html 加入 cartModal() 方法 改方法去打開 Modal

在 shopping.page.ts 中，主要是 import 跟 宣告 ModalController，還有實作 cartModal()，想要在 Modal 顯示甚麼頁面 component 屬性，還有怎麼把 this.serive.cart 的選購商品的資料傳到 Modal cart.page.ts 中，主要就是 componentProps 這個屬性。

cart.page.html 頁面 主要就是顯示 選購的商品 資訊 價格 數量
還有就是顯示總金額

cart.page.ts
亮點一: @Input() cart: ProductModel[]; 接來自於 shopping.page.ts 的 cart 的資料。
亮點二: dismissModal() 怎麼將 Modal 關閉。
其他 order() 就只是顯示訂單成立的提示視窗而已!

ShoppingService.ts
我將總金額的計算邏輯交給 ShoppingService.getCartTotal();

結果